import React from 'react';
import styles from './style';
import {
    Text,
    SafeAreaView,
    ImageBackground,
    Image,
    View,
    TouchableOpacity,
    DeviceEventEmitter,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../common/component/back';
import ListImg from '../../common/component/listImg';
import { getPhotosList } from '../../common/api/photos';
import { getUserInfoById } from '../../common/api/user';
import { defalutAvatar } from '../../util/constants';
import { userFocus, userUnfocus } from '../../common/api/userFocus';
// import { back } from 'react-native/Libraries/Animated/src/Easing';
const scStart = require('../../common/img/scStart.png');
const scStart2 = require('../../common/img/scStart2.png');
const meaasge = require('./img/message.png');
export default class SelfWork extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isPress: false,
            _id: '',
            list: [],
            currentUserInfo: {
                nickname: '',
            },
        };
    }
    componentDidMount() {
        this.getData();
        this.getThisUserInfo();
    }
    componentDidUpdate() {
        const { _id } = this.props.route.params;
        if (this.state._id && _id !== this.state._id) {
            this.getData();
            this.getThisUserInfo();
        }
    }
    getData = async () => {
        const { _id } = this.props.route.params;
        // const [userInfo, res] = await Promise.all([this.getUserInfo(), getPhotosDetailById(_id)]);
        const res = await getPhotosList({ user: _id, auditStatus: 1 });
        this.setState({
            list: res,
        });
    };
    getThisUserInfo = async () => {
        const { _id } = this.props.route.params;
        const currentUserInfo = await getUserInfoById(_id);
        this.setState({
            currentUserInfo,
            isPress: currentUserInfo.currentUserIsFocus,
            _id: currentUserInfo._id,
        });
    };
    _refreshMsssage = async () => {
        // this.setState({ isPress: !csid });
        const { _id } = this.props.route.params;

        if (!this.state.isPress) {
            await userFocus(_id);
        } else {
            await userUnfocus(_id);
        }
        this.getThisUserInfo();
        // DeviceEventEmitter.emit('RefreshMineData');
    };
    render() {
        let { navigation } = this.props;
        let { isPress, list, currentUserInfo } = this.state;
        const avatar = { uri: currentUserInfo.avatar || defalutAvatar };

        return (
            <SafeAreaView style={styles.content}>
                <Back navigation={navigation} witheIcon />
                <View style={styles.authStyle}>
                    <Image source={avatar} style={styles.authImg} />
                    <View style={styles.autnName}>
                        <Text style={styles.topText}>{currentUserInfo.nickname}</Text>
                        <Text style={styles.bottomText}>{currentUserInfo.desc}</Text>
                    </View>
                    <View style={styles.rightImg}>
                        <TouchableOpacity onPress={this._refreshMsssage}>
                            <View
                                style={[
                                    styles.imgStyle,
                                    { backgroundColor: isPress ? 'rgb(246,176,30)' : 'rgb(90,90,90)' },
                                ]}
                            >
                                <Animatable.Image
                                    source={isPress ? scStart2 : scStart}
                                    style={styles.imgSize}
                                    animation={isPress ? 'zoomIn' : ''}
                                    delay={isPress ? 300 : 0}
                                />
                            </View>
                        </TouchableOpacity>

                        <View style={styles.imgStyle}>
                            <Image source={meaasge} style={styles.imgSize} />
                        </View>
                    </View>
                </View>
                <View style={styles.authStyle} />
                <Animatable.View style={styles.contentText} animation="slideInUp">
                    <View style={styles.selfDis}>
                        <View style={styles.leftDis}>
                            <Text style={styles.leftText}>他的作品</Text>
                        </View>
                        <View style={styles.rightDis}>
                            <View style={styles.rightText}>
                                <Text style={styles.rightTopText}>{currentUserInfo.popularCount}</Text>
                                <Text style={styles.rightBottomText}>人气</Text>
                            </View>
                            <TouchableOpacity
                                onPress={() =>
                                    navigation.navigate('Fans', {
                                        title: '他的粉丝',
                                        listWhere: { beFocusUser: currentUserInfo._id },
                                    })
                                }
                            >
                                <View style={styles.rightText}>
                                    <Text style={styles.rightTopText}>{currentUserInfo.fansCount}</Text>
                                    <Text style={styles.rightBottomText}>粉丝</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() =>
                                    navigation.navigate('Fans', {
                                        title: '他关注的',
                                        listWhere: { user: currentUserInfo._id },
                                    })
                                }
                            >
                                <View style={styles.rightText}>
                                    <Text style={styles.rightTopText}>{currentUserInfo.foucsCount}</Text>
                                    <Text style={styles.rightBottomText}>关注</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <ListImg navigation={navigation} list={list} />
                </Animatable.View>
            </SafeAreaView>
        );
    }
}
